<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <gongzhonghao></gongzhonghao>
        <fans v-for=" item in list" :item="item" :key="item">
        </fans>
    </div>
</body>
<script>
    // 调度中心(公众平台)
    let bus = {
        list: [],
        // 订阅
        subscribe(callback) {
            this.list.push(callback);
        },
        // 发布
        publish(text) {
            // 遍历 list，执行回调函数
            this.list.forEach(callback => {
                callback && callback(text);
            });
        }
    }
    // 公众号
    Vue.component('gongzhonghao', {
        template: `
            <div style="border: 1px solid yellowgreen;">
                <h1>今日头条</h1>
                <input type="text" v-model="news"/>
                <button @click="click">发布</button>
            </div>
        `,
        data() {
            return {
                news: ''
            }
        },
        methods: {
            click() {
                console.log(this.news);
                // 发布
                bus.publish(this.news);
                this.news = '';
            }
        }
    });
    // 粉丝
    Vue.component('fans', {
        props: ['item'],
        template: `
            <div style="border: 1px solid skyblue;">
                <h3>客户端--{{item}}</h3>
                <span>{{info}}</span>
            </div>
        `,
        data() {
            return {
                info: ''
            }
        },
        mounted() {
            console.log('当前组件被挂载到 dom 树');
            // 订阅
            bus.subscribe(data => {
                console.log("订阅公众号：", data);
                this.info = data;
            });
        }
    });
    let vm = new Vue({
        el: '#app',
        data: {
            list: ['剑圣', '兽王', '冰女']
        }
    });
</script>

</html>